<template>
  <div class="bg_white h_16_em">
    <figure class="">
      <img src="@/assets/img/login_head.jpg" class="w_100" />
    </figure>
    <tab active-color="#0087f9" class="list_bor_none" v-model="index">
      <tab-item selected class="text_14em" >普通登录</tab-item>
      <tab-item class="text_14em" >短信登录</tab-item>
    </tab>

    <group class="minus_mt_15em" ref="group1" v-show="index == 0">
      <cell class="mt_1em">
        <i slot="icon" class="icon-custom-mn_yonghu c_title text_14em"></i>
          <x-input slot="title" class="pa_0 h_36em" type="text" required ref="userName" v-model="userInfo.userName" :max="20" placeholder="请输入用户名或手机号"></x-input>
      </cell>
      <cell>
        <i slot="icon" class="icon-custom-mb_suoding c_title text_14em"></i>
        <x-input slot="title" class="pa_0 h_36em" type="password" required ref="userPassword" v-model="userInfo.userPassword" placeholder="请输入密码"></x-input>
      </cell>
      <div class="wm_94 mt_2em mb_2em">
        <x-button size="large" :disabled="disabled" class="bg_title c_white h_3em" type="primary" action-type="button" @click.native="generalLogin">登录</x-button>
      </div>
    </group>

    <group class="minus_mt_15em" ref="group3" v-show="index == 1">
      <cell class="mt_1em">
        <i slot="icon"class="icon-custom-mb_shouji c_title text_14em"></i>
        <x-input slot="title" class="pa_0 h_36em" type="tel" required ref="mobile" is-type="china-mobile" v-model="userInfo.mobile" :max="11" placeholder="请输入手机号码"></x-input>
      </cell>
      <cell>
        <i slot="icon" class="icon-custom-mb_suoding c_title text_14em"></i>
        <x-input slot="title" class="pa_0 h_36em" type="text" required ref="smsCode" v-model="userInfo.smsCode" placeholder="请输入手机短信验证码"></x-input>
        <input type="text" class="dis_none" required ref="msgId" v-model="userInfo.msgId"></input>
        <x-button  class="bg_title c_white" type="primary" :disabled="phoneValidCodeDisabled"  @click.native="sendCode">{{phoneValidCodeMsg}}</x-button>
      </cell>
      <div class="wm_94 mt_2em mb_2em">
        <x-button size="large" :disabled="disabled" class="bg_title c_white h_3em" type="primary" action-type="button" @click.native="smsClick">登录</x-button>
      </div>
    </group>

    <div class="module wm_94 mt_2em">
      <cell>
        <p slot="title" class="touchstart text_12em c_title_sub"><router-link to="/register">注册新用户</router-link></p>
        <p primary="content" class="touchstart text_12em"><router-link to="/resetPwd">忘记密码</router-link></p>
      </cell>
    </div>
    <div class="module w_100 pb_5 mt_3">
      <cite class="dis_block abs wm_90 bor_bottom2 bor_gray_ddd mt_08em"></cite>
      <strong class="dis_block rel center w_30 bg_white text_al_c text_12em">第三方登录</strong>
      <div class="length3 mt_1em">
        <router-link to="#"  class="fl text_al_c bg_white touchstart">
          <i class="icon-custom-sr_weixin mr_03em c_title c_wechat text_3em"></i>
          <em class="dis_block line_h_2em">微信登录</em>
        </router-link>
        <router-link to="#" class="fl text_al_c bg_white touchstart">
          <i class="icon-custom-sr_weibo mr_03em c_title c_weibo text_3em"></i>
          <em class="dis_block line_h_2em">微博登录</em>
        </router-link>
        <router-link to="#"  class="fl text_al_c bg_white touchstart">
          <i class="icon-custom-sr_qq mr_03em c_title c_qq text_3em"></i>
          <em class="dis_block line_h_2em">QQ登录</em>
        </router-link>
      </div>
    </div>
    <div>
    </div>
  </div>
</template>

<script type="text/babel">
  import { default as localStorage } from '@/utils/localStorage'
  import { XInput, Group, Cell, Tab, TabItem, XButton, Swiper, SwiperItem } from 'vux'
  import * as login from '@/api/user'
  import * as jpush from '@/utils/jpush';
  import * as jsUtil from '@/utils/jsUtil';

  export default {
    created(){
      history.pushState(null, null, document.URL) // 阻止返回按钮事件
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL)
      })
      this.userInfo.userName = localStorage.getItem('userName')?localStorage.getItem('userName'):''
      this.userInfo.mobile = localStorage.getItem('mobile')?localStorage.getItem('mobile'):''
    },
    mounted() {
    },
    watch: {
      index(){

      }
    },
      data(){
      return {
        height:'180px',
        index:0,
        timer:null,
        phoneValidCodeDisabled:false,
        phoneValidCodeMsg:'发送验证码',
        start: false,
        disabled:false,
        userInfo:{
          userName: '',
          userPassword: '',
          mobile: '',
          smsCode: '',
          msgId: '',
          openId: localStorage.getItem('openId'),
          weChatFlag: false
        }
      }
    },
    components: {
      XInput,
      Group,
      Cell,
      Tab,
      TabItem,
      XButton,
      Swiper,
      SwiperItem
    },
    methods: {
      generalLogin () {
        this.userInfo.weChatFlag = jsUtil.isWeChat();
        if(!this.$refs.userName.valid){
          this.$vux.toast.show({text: '请输入用户名', type:'warn', time:1500})
          return
        }
        if(!this.$refs.userPassword.valid){
          this.$vux.toast.show({text: '请输入密码', type:'warn', time:1500})
          return
        }
        this.disabled = true
        this.$vux.loading.show({text: '登录中', position:'absolute'})
        this.$store.dispatch('login',this.userInfo).then(() => {
          localStorage.setItem('userName',this.userInfo.userName)
          this.$vux.toast.show({text: '登录成功', type:'success', time:1500})
          this.$router.push({ path: '/' })
          this.$vux.loading.hide();
        }).catch(error => {
          this.disabled = false
          this.$vux.loading.hide();
        })
      },
      sendCode () {
        if(!this.$refs.mobile.valid){
          this.$vux.toast.show({text: '请输入正确的手机号', type:'warn', time:1500, width:'9em'})
          return
        }
        // 倒计时代码
        const TIME_COUNT = 5;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.phoneValidCodeDisabled = true;
          this.phoneValidCodeMsg = this.count + 's后重新获取';
          this.timer = setInterval(() => {
            if (this.count > 1 && this.count <= TIME_COUNT) {
              this.count--;
              this.phoneValidCodeMsg = this.count + 's后重新获取';
            } else {
              this.phoneValidCodeMsg = '重新获取';
              this.phoneValidCodeDisabled = false;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
        this.$vux.loading.show({text: '发送中', position:'absolute'})
        login.sendSmsCode(this.userInfo).then(respones => {
          localStorage.setItem('mobile',this.userInfo.mobile)
          this.start = true;
          this.$vux.loading.hide();
          this.userInfo.msgId = respones.data.msg;
          console.log("msgId:"+respones.data.msg)
          this.$vux.toast.show({text: '短信发送城功', type:'success', time:1500})
        }).catch(error => {
          this.$vux.loading.hide();
        })

      },
      smsClick(){
        if(!this.$refs.mobile.valid){
          this.$vux.toast.show({text: '请输入正确的手机号', type:'warn', time:1500})
          return
        }
        if(!this.$refs.msgId === ''){
          this.$vux.toast.show({text: '请您点击按钮获取验证码', type:'warn', time:1500})
          return
        }
        if(!this.$refs.smsCode.valid){
          this.$vux.toast.show({text: '请输入验证码', type:'warn', time:1500})
          return
        }
        this.disabled = true
        this.$vux.loading.show({text: '登录中', position:'absolute'})
        this.$store.dispatch('smsLogin',this.userInfo).then(() => {
          localStorage.setItem('mobile',this.userInfo.mobile)
          this.$vux.toast.show({text: '登录成功', type:'success', time:1500})
          this.$router.push({ path: '/' })
          this.$vux.loading.hide();
        }).catch(error => {
          this.disabled = false
          this.$vux.loading.hide();
        })
      },
      registerClick() {
        this.$router.push({ path: '/login/register' })
      }
    }
  }
</script>
